<template>
  <div class='dangji'>
    <div class="top">
      <div class="title">当季目的地</div>
      <div class="note">你朋友圈的旅行内容，我们包了</div>
      <div class="more">更多</div>
    </div>
    <div class='content'>
      <div class="navOne">
        <div v-for='(item,index) in fenlei' :key='index' :class='{active:check-index==0}' @click="fun(index)">{{item}}</div>
      </div>
      <div class="main">
        <div v-show='check-index==0' class='guonei' v-for='(item,index) in main' :key='index'>
          <div class="pho">
            <div v-for='(i,x) in item.pho' :key='x' :style='{backgroundImage:"url("+i.pho+")"}'>
              <div class="title">{{i.title}}</div>
              <div class='note'>{{i.note}}</div>
            </div>
          </div>
          <div class="navTwo">
            <div v-for='(i,x) in item.navTwo' :key='x'>{{i}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dangji',
  data () {
    return {
      fenlei: ['国内', '出境'],
      check: 0,
      main: [
        {
          pho: [
            {
              pho: 'static/Home/guonei1.jpg',
              title: '稻城亚丁',
              note: '雪山彩林'
            },
            {
              pho: 'static/Home/guonei2.jpg',
              title: '南疆',
              note: '金秋胡杨林'
            },
            {
              pho: 'static/Home/guonei3.jpg',
              title: '光雾山',
              note: '红叶王国'
            }
          ],
          navTwo: ['太行山', '林芝', '党岭', '神农架', '雨崩', '牛背山']
        },
        {
          pho: [
            {
              pho: 'static/Home/jingwai1.jpg',
              title: '克罗地亚',
              note: '君临之城'
            },
            {
              pho: 'static/Home/jingwai2.png',
              title: '槟城',
              note: '风味南洋'
            },
            {
              pho: 'static/Home/jingwai3.jpg',
              title: '纳米比亚',
              note: '狂野非洲'
            }
          ],
          navTwo: ['新加坡', '格鲁吉亚', '缅甸', '墨西哥', '吴哥迷城', '古巴']
        }
      ]
    }
  },
  methods: {
    fun (ele) {
      this.check = ele
    }
  }
}
</script>
<style scoped lang='less'>
.dangji{
  margin-bottom:10px;
  &>.top{
    padding: 0 12px ;
    display: flex;
    &>.title{
      font-size:18px;
      font-weight:bold;
    }
    &>.note{
      height: 16px;
      line-height: 16px;
      background-color: #fff3ea;
      color:#ff9e51;
      padding:5px;
      border-radius:10px;
      margin-left: 10px;
    }
    &>.more{
      height: 26px;
      line-height:26px;
      margin-left:50px;
      background-image: url(/static/Home/right1.png);
      background-repeat: no-repeat;
      background-position: center right;
      background-size: 8px 13px;
      padding-right:10px;
    }
  }
  &>.content{
    &>.navOne{
      display: flex;
      &>div{
        padding:5px 30px;
        border-radius:50px;
        font-size:16px;
        font-weight:bold;
        border:1px solid #eee;
        margin: 10px 0 10px 10px;
      }
      &>.active{
        color:#eab826;
      }
    }
    &>.main{
      width: 100%;
      box-sizing: border-box;
      padding:10px;
      &>div{
        width: 100%;
        &>.pho{
          width: 100%;
          display: flex;
          justify-content:space-between;
          &>div{
            width: 33%;
            height: 130px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            &>.title{
              margin-top:80px;
              font-size:18px;
              font-weight: bold;
              color:#fff;
            }
            &>.note{
              color:#999;
            }
          }
          &>div:first-child{
            border-radius:10px 0 0 10px;
          }
          &>div:last-child{
            border-radius:0 10px 10px 0;
          }
        }
        .navTwo{
          display: flex;
          flex-wrap:wrap;
          justify-content:space-between;
          &>div{
            width: 31%;
            border:1px solid #999;
            font-size:16px;
            font-weight: bold;
            border-radius:5px;
            padding:10px 0;
            margin-top:10px;
          }
        }
      }
    }
  }
}
</style>
